<div id="content">
	<div class="row s_page_title" *ngIf="pageType ==='new'">
		<sa-big-breadcrumbs [items]="['供应链管理','生产采购管理','新增采购申请']" icon="fa fa-cogs" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<div class="row s_page_title" *ngIf="pageType ==='updata'">
		<sa-big-breadcrumbs [items]="['供应链管理','生产采购管理','编辑采购申请']" icon="fa fa-cogs" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<div class="s_page_wrap">
		<div class="page-header">
			<h1 class="page_detail_title">{{page_title}}采购申请</h1>
		</div>
		<div class="row" style="margin-top:5px;">
		<div class="col-xs-12">
			<form  name="purchaseForm" id="purchaseForm" class="form-horizontal" (ngSubmit)="onSubmit()" novalidate="novalidate" [saBootstrapValidator]="validatorOptions">
				<div class="form-group">
					<label class="control-label col-sm-1 no-padding-right">申请日期<sup>*</sup></label>
					<div class="col-sm-10">
						<div class="clearfix">
							<input *ngIf="pageType ==='new'" class="form-control s_selected_time" name="applyDate" type="text" [(ngModel)]='page.applyDate' id="datetimepicker1" autocomplete="off" placeholder="选择申请日期" />
							<input *ngIf="pageType ==='updata'" class="form-control s_selected_time" name="applyDate" type="text" [(ngModel)]='page.applyDate' id="datetimepicker1" autocomplete="off" placeholder="选择申请日期" disabled/>
						</div>
					</div>
				</div>
				
				<div class="form-group">
					<label class="control-label col-sm-1 no-padding-right">申请类型<sup>*</sup></label>
					<div class="col-sm-10">
						<div class="clearfix">
							<select class="form-control" name="buyApplyType" [(ngModel)]="page.buyApplyType" (change)="typeChange($event.target.value)"style="width: 100%">
								<option value="">请选择</option>
								<option *ngFor="let item of typeList" [value]='item.value'>{{item.label}}</option>
							</select>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-1 no-padding-right">申请人<sup>*</sup></label>
					<div class="col-sm-10">
						<div class="clearfix cancle">
							<input class="form-control" name="applicant" [(ngModel)]='page.applicant' type="text" placeholder="申请人" />
							<div class="s_del_icon" (click)='delKey("applicant")'>x</div>
						</div>
					</div>
				</div>
				
				<div class="form-group">
					<label class="control-label col-sm-1 no-padding-right">申请部门<sup>*</sup></label>
					<div class="col-sm-10">
						<div class="clearfix cancle">
							<input class="form-control" name="applyDepartmet" type="text" [(ngModel)]='page.applyDepartmet' placeholder="申请部门" />
							<div class="s_del_icon" (click)='delKey("applyDepartmet")'>x</div>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label class="control-label col-sm-1 no-padding-right" for="sourceUrl">采购申请明细</label>
					<div class="col-sm-10">
						<div class="clearfix">
							<a class="uploadBtn btn-primary" *ngIf="pageType ==='new'" (click)="showImportModal(weightModal)">上传</a>
							<span class="purchase-detail" *ngIf="pageType ==='new' && allSize != 0">上传:{{ allSize }}/成功:<i style="color: green;">{{ success }}</i>/失败:<i style="color: red;">{{ errSize }}</i></span>
							&nbsp;&nbsp;<a class="purchase-view" *ngIf="pageType ==='new' && allSize != 0" (click)="viewUpload(uploadModal)">查看结果</a>
							<div class="table_scroll" style="margin-top: 20px;">
                <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>物料编码</th>
                            <th>物料名称</th>
                            <th>型号规格</th>
                            <th>单位</th>
                            <th>数量</th>
                            <th>要求到货日期</th>
                            <th>交货地址</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody *ngIf="submitCheckTableData.length != 0">
                        <tr *ngFor="let row of submitCheckTableData; let i = index" [attr.data-index]="i">
                            <td>{{ i+1 }}</td>
                            <td>{{row.materialNumber}}</td>
                            <td>{{row.materialName}}</td>
                            <td>{{row.specification}}</td>
                            <td>{{row.units}}</td>
                            <td>{{row.count}}</td>
                            <td>{{row.askDeliveryDate}}</td>
                            <td>{{row.deliveryAddress}}</td>
                            <td>{{row.remark}}</td>
                            <td><button type="button" (click)='delSubmitCheck(row)'>删除</button></td>
                        </tr>
                    </tbody>
										<tbody *ngIf="submitCheckTableData.length == 0">
											<p class="empty">暂无数据</p>
										</tbody>
                </table>
              </div>
						</div>
					</div>
				</div>

				<div class="center">
					<button type="submit" class="btn btn-primary" *ngIf='page_title === "新增"' >添加</button>
					<button type="submit" class="btn btn-primary" *ngIf='page_title === "编辑"' >保存</button>
					<button type="button" (click)='goBack()' class="btn default">返回</button>
				</div>
			</form>
			<div class="hr hr-dotted"></div>
		</div>
	</div>
	</div>
</div>

<!-- 上传结果 -->
<div bsModal #uploadModal="bs-modal" class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header" style="position: relative;">
				<button type="button" class="close" (click)="cancelUploadUp(uploadModal)" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">上传结果</h4>
			</div>
			<div class="modal-body">
				<div class="uploadResult">
					<p>上传数据:{{ allSize }}条</p>
					<p>成功数据:<span class="green">{{ success }}条</span></p>
					<p>失败数据:<span class="red">{{ errSize }}条</span></p>
					<div class="resultContent" *ngIf="errMsg.length != 0">
						<p class="lastResult" *ngFor="let item of errMsg; let i = index">
							{{ item }}
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 上传结果 结束 -->

<!-- 导入弹框 -->
<div bsModal #weightModal="bs-modal" class="modal fade" id="weightModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header" style="position: relative;">
				<button type="button" class="close" (click)="cancelUp(weightModal)" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">上传Excel文件</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<form class="form form-inline " role="form">
						<div class="row" style="margin-bottom: 24px;">
							<div class="form-group module_line">
								<button type="button" class="btn btn-primary" (click)="load_module()">下载模板</button>
								<span class="row" class="note">注：请先下载模板，采用模板编辑文件后上传</span>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-10" style="padding: 0;">
								<div class="clearfix module_line">
									<button type="button" class="btn btn-primary" style="width: 120px;margin-bottom: 12px;">上传模板文件
										<input type="file" class="up" (change)="fileChange($event.target.files)" name="fileToUpload" (click)='clearFile()' [(ngModel)]='fileUp' type="file" placeholder='' />
									</button>
									<span class="row" class="note">注：格式excel</span>
								</div>
							</div>
						</div>
						<div *ngIf="fileToUpload">
							<label class="control-label col-sm-1"></label>
							<div>
								<ul>
									<li class="file_list"><i class="fa fa-file-text-o" style="margin-right: 12px;"></i>{{fileToUpload.name}}<i class="fa fa-check-circle green" style="margin-left: 60px;"></i></li>
								</ul>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" (click)="cancelUp(weightModal)">取消</button>
				<button type="button" class="btn btn-primary" (click)="submitData(weightModal)">确认</button>
			</div>
		</div>
	</div>
</div>
<!-- 导入弹框 结束 -->
<style>
.purchase-detail i{
	font-style:normal;
}
.purchase-view{
	color: blue;
	text-decoration: none;
}
.resultContent{
	padding: 5px;
	border: 1px solid #ddd;
	margin: 5px 0;
}
.empty{
	text-align: center;
	padding: 10px 0;
	width: 100%;
}
.uploadBtn{
	background-color: #1A6DDD;
	border-color: #1A6DDD;
	display: inline-block;
	border-radius: 4px;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	white-space: nowrap;
	padding: 5px 12px;
	font-size: 13px;
	line-height: 1.42857143;
	text-decoration: none;
	margin-right: 10px;
}
</style>